<template>
  <el-table v-bind="$attrs">
    <el-table-column v-for="(column, index) in columns" :key="index" v-bind="column">
      <!-- 如果列配置中有 slots，则使用对应的插槽 -->
      <template v-if="column.slots?.default" #default="scope">
        <slot v-if="scope.$index !== -1" :name="column.slots.default" v-bind="scope"></slot>
      </template>
      <!-- 如果列配置中有 header slots -->
      <template v-if="column.slots?.header" #header="scope">
        <slot :name="column.slots.header" v-bind="scope"></slot>
      </template>
      <!-- tag显示 -->
      <template
        v-if="column?.cellRenderer?.type === 'dictField' && $attrs?.dictData[column?.cellRenderer?.dictKey]?.length"
        #default="scope">
        <el-tag :type="setTagType(scope, column)" v-if="column?.cellRenderer?.showTag">
          {{
            $attrs.dictData[column.cellRenderer.dictKey].filter(item => {
              return item.value === scope.row[column.prop]
            })[0]?.label
          }}
        </el-tag>
        <span v-else>
          {{
            $attrs.dictData[column.cellRenderer.dictKey].filter(item => {
              return item.value === scope.row[column.prop]
            })[0]?.label
          }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { computed, useAttrs } from 'vue'

interface ColumnConfig {
  prop?: string
  label?: string
  width?: string | number
  minWidth?: string | number
  fixed?: boolean | string
  sortable?: boolean | string
  align?: 'left' | 'center' | 'right'
  showOverflowTooltip?: boolean
  type?: string
  key?: string
  slots?: {
    default?: string
    header?: string
  }
  [key: string]: any
}

const attrs = useAttrs()

const columns = computed(() => {
  const columns = (attrs as any).columns
  return Array.isArray(columns) ? (columns as ColumnConfig[]) : []
})

const setTagType = (scope, column) => {
  if (!scope.row[column.prop]) {
    return 'info'
  }
  const tagType = ['info', 'primary', 'danger', 'danger', 'info', 'success', 'danger']
  return tagType[Number(scope.row[column.prop])]
}
</script>

<style lang="scss" scoped></style>
